<!-- 产品详情页 -->
<template>
<div>
    产品详情页
<van-sku
    v-model="show"
    :sku="sku"
    :goods="goods"
    :goods-id="goodsId"
    :quota-used="quotaUsed"
    :hide-stock="sku.hide_stock"
    @buy-clicked="onBuyClicked"
    @add-cart="onAddCartClicked"
    ref='skuaaaa'
    />
<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" dot />
  <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
  <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
  <van-goods-action-button type="warning" text="加入购物车" @click='addcar' />
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
</div>
</template>

<script>
import {getGoodsDetail} from '@/utils/https'
export default {
    data() {
        return {
            show:false, // 是否显示购物车弹窗
            sku:{
                tree:[], // 规格类目数组
                hide_stock: false, // 是否隐藏剩余库存
                price: '1.00', // 默认价格（单位元）
                stock_num: 227, // 商品总库存
            },
            goods:{},  //当前商品信息 
            goodsId:'', //当前商品id
            quotaUsed:0  //已经购买过的数量

        }
    },
    created(){
        console.log(this.$route.query)
        getGoodsDetail({id:this.$route.query.id}).then(res=>{
            console.log(res)
        })
    },
    methods:{
        addcar(){
            //显示加入购物车弹窗
            this.show =true
        },
        onBuyClicked(){
            // 购买
        },
        onAddCartClicked(){
            // 商品加入购物车
            this.show =false
            // 调用加入购物车接口
            console.log(this.$refs.skuaaaa.getSkuData())
        }
    }

}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>